---
title: Text Icon Spacing
description: The TextIconSpacing component can be used to add spacing between icons and other components when a flex/grid container's gap property does not work.
docType: Demo
docGroup: Components
group: Presentation
alias: [Spacer]
components: [TextIconSpacing]
---

# Text Icon Spacing

The `TextIconSpacing` component can be used to add spacing between icons and
other components when a flex/grid container's `gap` property does not work.

## Simple Example

Provide an `icon` prop of the icon component to be separated with other content.

```demo source="./SimpleTextIconSpacingExample.tsx"

```

### Icon After Example

Enable the `iconAfter` prop to render the `icon` after the `children`.

```demo source="./IconAfterTextIconSpacingExample.tsx"

```

### Stacked Example

If the `TextIconSpacing` component is within a flex-column or grid container,
enable the `stacked` prop to apply the margin on the bottom instead of
left/right.

```demo source="./StackedTextIconSpacingExample.tsx"

```

## Customizing Spacing

The spacing can be modified by changing the [$SASSDOC](icon-spacing) Sas
variable or the `--rmd-icon-spacing` custom property using the
[$SASSDOC](icon-set-var) mixin.

```demo source="./CustomizingSpacingExample.tsx"

```
